<script setup>
import { fetch7DayData } from '../api/weatherAPI';
import { ref, watch } from 'vue';
import { initStackedAreaChart } from "../util/echarts";
import { useCityStore } from '../stores/cityStore'
import { initTemperatureChart } from '../util/echarts';
const cityStore = useCityStore();

// 添加侦听器
// watch(
//     //[必选]监听的数据源
//     () => cityStore.location,
//     //【必选】回调函数，当数据源有变化时，需要做的事情
//     () => {
//         getData(cityStore.location.id);
//     },
//     //即时回调，初始状态执行一次回调函数
//     { immediate: true }
// );
watch(
    //[必选]监听的数据源
    () => cityStore.location,
    //【必选】回调函数，当数据源有变化时，需要做的事情
    () => {
        const locationId = cityStore.location?.id;
        if (locationId) {
            getData(locationId);
        }
    },
    { immediate: true }
);
// getData(cityStore.location.id);
const maxTemps = ref([]);
const minTemps = ref([]);
const fixData = ref([]);
//  const id='101010100'
//  getData(id);
async function getData(locationID) {
    const res = await fetch7DayData(locationID);

    res.daily.forEach(element => {
        maxTemps.value.push(element.tempMax);
        minTemps.value.push(element.tempMin);
        fixData.value.push(element.fxDate);
    });
console.log(maxTemps.value)
    // 确保 chartDom 已经挂载
    // if (chartDom.value) {
    //     initStackedAreaChart(chartDom.value, fixData.value, minTemps.value, maxTemps.value);
    // }
    // 假设 fixData.value 是时间戳或 ISO 格式字符串数组（如 ['2023-10-01', '2023-10-02', ...]）
// const formattedDate = fixData.value.map((timeStr) => 
//   dayjs(timeStr).format('MM月DD日') // 转换为 "10月01日", "10月02日"
// );
   if (chartDom.value) {
    initTemperatureChart(chartDom.value, fixData.value, minTemps.value, maxTemps.value);
}
}
const chartDom = ref(null);
</script>

<template>
    <div>
    </div>
    <div id="main" ref="chartDom">
        <!-- vue3中引入dom元素的方式,第二步 -->
    </div>
</template>

<style scoped>
    #main {
        width: 600px;
        height: 400px;
    }
</style>